~{template "public/header" .}~

<style>
    /* #app {
        margin: 0 auto;
    } */

    #app .dialog .el-dialog__body {
        padding: 0;
    }

    #app .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    #app .container .jielong-tabs .el-tabs__nav {
        float: unset;
    }

    #app .container .jielong-tabs #tab-2 {
        float: right;
    }

    #app .container .jielong-tabs .jielong-add {
        font-weight: 600;
        /* color: green; */
    }

    #app .container .jielong-list .jielong-item {
        display: flex;
        justify-content: space-between;
    }

    #app .container .jielong-list .box-card {
        margin: 10px 0;
    }

    #app .container .jielong-list .jielong-item .jielong-item-left {
        color: #666;
    }

    #app .container .jielong-list .jielong-item .jielong-item-left .jielong-item-left-title {
        font-size: 16px;
        font-weight: 600;
    }

    #app .container .jielong-list .jielong-item .jielong-item-left .jielong-item-left-title .icon {
        color: #40ADFF;
    }

    #app .container .jielong-list .jielong-item .jielong-item-left .jielong-item-left-time {
        color: #999;
    }

    #app .container .jielong-list .jielong-item .jielong-item-right {
        display: flex;
        align-items: center;
    }

    #app .container .jielong-list .jielong-item .jielong-item-right>div {
        margin-left: 5px;
    }

    #app .container .jielong-list .jielong-item .jielong-item-right .jielong-item-right-btn {
        padding: 0px;
        font-size: 22px;
        width: 30px;
        text-align: center;
        cursor: pointer;
    }
</style>
<!-- 加载需要的组件 -->
~{template "components/jielong_edit_form" .}~
<div id="app" v-loading="false">

    <div class="container">
        <el-tabs class="jielong-tabs" :before-leave="beforeLeave">
            <el-tab-pane label="我发起的"></el-tab-pane>
            <el-tab-pane label="我参与的"></el-tab-pane>
            <!-- <el-tab-pane>
                <template slot="label">
                    <i class="el-icon-plus"></i>
                </template>
            </el-tab-pane> -->
            <el-tab-pane class="float-right">
                <template slot="label">
                    <el-tooltip content="刷新">
                        <el-button type="text" icon="el-icon-refresh-left" @click="loadData"></el-button>
                    </el-tooltip>
                    <el-button class="jielong-add" type="text" icon="el-icon-plus" @click="addJielong">发起新接龙</el-button>
                </template>
            </el-tab-pane>
        </el-tabs>
        <div class="jielong-list">
            <el-card class="box-card" shadow="hover" v-if="!lists.length">
                <el-empty description="暂无接龙记录"></el-empty>
            </el-card>
            <div v-else>
                <el-card class="box-card" shadow="hover" v-for="(item, index) in lists" :key="index">
                    <div class="jielong-item">
                        <div class="jielong-item-left">
                            <div class="jielong-item-left-title">
                                <i class="el-icon-s-custom icon" v-if="tabIndex==0"></i>
                                <i class="el-icon-s-flag icon" v-else></i>
                                {{item.Theme}}
                            </div>
                            <div class="jielong-item-left-time">{{dateHandle(item.CreatedAt)}}</div>
                        </div>
                        <div class="jielong-item-right">
                            <div @click="showJielong(item)">
                                <el-tooltip class="item" effect="dark" content="查看接龙详情" placement="top">
                                    <el-tag type="success" class="pointer">
                                        <i class="el-icon-user-solid"></i>
                                        {{item.UsersCount}}
                                    </el-tag>
                                </el-tooltip>
                            </div>
                            <div @click="$makeJielongLink(item)">
                                <el-tooltip class="item" effect="dark" content="复制接龙链接" placement="top">
                                    <el-tag class="jielong-item-right-btn">
                                        <i class="el-icon-paperclip"></i>
                                    </el-tag>
                                </el-tooltip>
                            </div>
                            <div v-if="tabIndex==0">
                                <el-dropdown @command="c=>handleCommand(c,item)">
                                    <el-tag class="jielong-item-right-btn">
                                        <i class="el-icon-s-unfold"></i>
                                    </el-tag>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="edit" icon="el-icon-edit">编辑</el-dropdown-item>
                                        <el-dropdown-item command="del" icon="el-icon-delete" class="red">
                                            删除
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </div>
                </el-card>
                <!-- 分页 -->
                <el-card shadow="hover">
                    <div class="center">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="pager.page" :page-size="pager.size" :hide-on-single-page="false"
                            :pager-count="5" :layout="pagerLayout" :total="pager.total">
                        </el-pagination>
                    </div>
                </el-card>
                <!-- 分页 end -->
            </div>
        </div>
    </div>
    <!-- app -->
    <el-dialog class="dialog" :visible.sync="visible" :title="dialog.title" :close-on-click-modal="false" width="660px"
        top="5vh" @close="dialogClose">
        <iframe :src="dialog.url" width="100%" style="height: 80vh;border: 0;"></iframe>
    </el-dialog>
    <el-dialog class="dialog" :visible.sync="visibleEdit" title="群接龙 - 编辑" :close-on-click-modal="false"
        :width="dialogEditWidth">
        <jielong-edit-form :jielong-item="jielongItem" @success="onEditSuccess"></jielong-edit-form>
    </el-dialog>
</div>

<script>
    window.app = new Vue({
        el: '#app',
        data: function () {
            return {
                dialog: {
                    title: '群接龙',
                    url: 'about:blank'
                },
                jielongItem: {},
                visible: false,
                visibleEdit: false,
                tabIndex: 0,
                pager: {
                    page: 1,
                    size: 6,
                    total: 0,
                },
                lists: []
            }
        },
        mounted() {
            // this.loadData();
        },
        computed: {
            pagerLayout: function () {
                // console.log('isMobile', window.isMobile());
                return window.isMobile() ? 'prev, pager, next' : 'total, prev, pager, next, jumper';
            },
            dialogEditWidth: function () {
                return window.isMobile() ? '100%' : '660px';
            },
            pageData: function () {
                return `pageSize=${this.pager.size}&page=${this.pager.page}`;
            }
        },
        methods: {
            dateHandle(e) {
                return e.substring(0, 19).replace('T', ' ');
            },
            dialogClose() {
                this.dialog.url = 'about:blank'
                this.loadData();
            },
            loadData() {
                if (this.tabIndex == 0) {
                    this.getJielonListOfMy();
                } else {
                    this.getJielonListNotMy();
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.loadData();
            },
            getJielonListOfMy: function () {
                let url = `/jielong/api/Lists?${this.pageData}`;
                return fetchGet(url).then(res => {
                    // console.log('lists', res);
                    this.lists = res.data;
                    this.pager.total = res.total;
                })
            },
            getJielonListNotMy: function () {
                let url = `/jielong/api/ListsOfParticipate?${this.pageData}`;
                return fetchGet(url).then(res => {
                    // console.log('lists', res);
                    this.lists = res.data;
                    this.pager.total = res.total;
                })
            },
            beforeLeave(activeName, oldActiveName) {
                if (activeName > 1) {
                    return false;
                }
                // console.log(activeName, oldActiveName);
                this.tabIndex = activeName;
                this.pager.page = 1;
                this.loadData();
            },
            handleCommand(c, item) {
                // console.log('button click', c, item);
                switch (c) {
                    case 'edit':
                        this.editJielong(item);
                        break;
                    case 'del':
                        this.deleteJielong(item);
                        break;
                    default:
                        break;
                }
            },
            editJielong(item) {
                this.jielongItem = item;
                this.visibleEdit = true;
            },
            onEditSuccess(data) {
                this.$message.success('更新成功');
                this.visibleEdit = false;
                let item = this.lists.find(e => e.ID === data.ID);
                item.Theme = data.Theme;
                item.Content = data.Content;
                item.Fill = data.Fill;
            },
            deleteJielong(item) {
                let title = `正在准备删除【${item.Theme}】，`;
                this.$confirm(title + '此操作将永久删除该接龙和参与人, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    fetchGet('/jielong/api/ListDelete/' + item.ID).then(res => {
                        this.$message.success('删除成功');
                        this.loadData();
                    })
                }).catch(() => { })
            },
            showJielong(item) {
                let url = '/jielong/page/show/' + item.ID;
                if (isMobile()) {
                    window.location.href = url
                    return
                }
                this.dialog.title = '群接龙 - 详情';
                this.dialog.url = url;
                this.visible = true
            },
            addJielong(done) {
                // window.open('/jielong/page/add', '_blank')
                // window.location.href = '/jielong/page/add'
                if (isMobile()) {
                    window.location.href = '/jielong/page/add'
                    return
                }
                this.dialog.title = '群接龙 - 新建';
                this.dialog.url = '/jielong/page/add'
                this.visible = true
            },
        }
    })
</script>

~{template "public/footer" .}~